<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@ include file="../common/include/header.jsp"%>

<div style="width: 980px">
<table border="0" cellpadding="0" cellspacing="0" width="980px">
	<tr>
		<td style="vertical-align: top;width: 180px;background-color: #fdb73a;">
			<%@ include file="../common/include/leftmenu.jsp"%>
		</td>
		<td style="text-align: center;width: 800px;background: #ffffff; vertical-align: top;">
			
			<html:form action="/photoboard.do">
			
			<%@include file="logo.jsp" %>
			
			<div class="boardname">	<bean:write name="photoForm" property="pbname"/></div>
			
			<table border="0" cellspacing="0" cellpadding="0" width="700px">
				<tr>
					<td style="padding: 15px;border: 1px dotted #bbbbbb;">
						<logic:iterate id="photoboard" name="photoForm" property="photoList" type="model.PhotoBoard">
							<div style="width: 165px; height: 175px; float: left">
								<table border="0" cellpadding="0" cellspacing="0">
									<tr>
										<td>
											<a href="javascript:getBoard('photoboard.do?method=photoView&rownum=<bean:write name="photoboard" property="rownum"/>&pbno=', '<bean:write name="photoboard" property="pbno"/>')">
												<logic:greaterThan name="photoForm" property="cono" value="10">
													<img src="<%=path%>/uploadfiles/<%=photoboard.getPbsfn()%>" width="120px" height="120px" border="0" onmouseover="pop('<%=photoboard.getNickName()%>','<%=photoboard.getPbtitle()%>','<%=photoboard.getPbcounter()%>')" onmouseout="kill()"/>
												</logic:greaterThan>
												<logic:lessEqual name="photoForm" property="cono" value="10">
													<img src="<%=path%>/uploadfiles/<%=photoboard.getPbsfn()%>" width="120px" height="120px" border="0" onmouseover="pop('<%=photoboard.getMid()%>','<%=photoboard.getPbtitle()%>','<%=photoboard.getPbcounter()%>')" onmouseout="kill()"/>
												</logic:lessEqual>
											</a>
										</td>
									</tr>
									<tr>
										<td bgcolor="#efefef" width="120px">
											<bean:write name="photoboard" property="rownum"/>.&nbsp;
											<a href="javascript:getBoard('photoboard.do?method=photoView&rownum=<bean:write name="photoboard" property="rownum"/>&pbno=', '<bean:write name="photoboard" property="pbno"/>')">
												<%if(photoboard.getPbtitle().length()<7){%>
													<bean:write name="photoboard" property="pbtitle"/>
													
													
												<%}else{%>
													<%=photoboard.getPbtitle().substring(0,6)+"..."%>
												<%}%>
											</a>
										</td>
									</tr>
									<tr>
										<td bgcolor="#efefef" width="120px">
											<bean:write name="photoboard" property="pbdate"/>
										</td>
									</tr>
								</table>
							</div>
						</logic:iterate>
					</td>
				</tr>
				<tr>
					<td>
				<%if(request.getParameter("selectField")!=null){%>
					<%if(request.getParameter("selectField").matches("title")){%>
						<jsp:include page="pager.jsp">
							<jsp:param name="url" value="photoboard.do?method=photoList&selectField=title"/>
						</jsp:include>
					<%}else if(request.getParameter("selectField").matches("id")){%>
						<jsp:include page="pager.jsp">
							<jsp:param name="url" value="photoboard.do?method=photoList&selectField=id"/>
						</jsp:include>
					<%}%>
				<%}else{%>
						<jsp:include page="pager.jsp">
							<jsp:param name="url" value="photoboard.do?method=photoList"/>
						</jsp:include>
				<%}%>
					</td>
				</tr>
				<tr>
					<td>
						<table border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td>
									<input type="hidden" name="cono" value="<bean:write name="photoForm" property="cono"/>"/>
									<input type="hidden" name="pbname" value="<bean:write name="photoForm" property="pbname"/>"/>
									<input type="hidden" name="method" value="photoList"/>
									<html:select property="selectField">
										<html:option value="title">제목</html:option>
										<html:option value="id">작성자</html:option>
									</html:select><html:text property="searchWord" size="20"/><html:link href="javascript:search()">
										<img src="<%=imagePath %>icon_search.jpg" style="vertical-align: text-bottom;"/>
									</html:link>
								</td>
							</tr>
						</table>
					</td>
				</tr>
				<tr>
					<td align="right">
						<a href="javascript:getBoard('photoboard.do?method=photoInsertForm&cono=<bean:write name="photoForm" property="cono"/>&pbname=', '<bean:write name="photoForm" property="pbname"/>')"><img src="<%=imagePath %>icon_write.jpg"/></a>&nbsp;
						<a href="javascript:getBoard('photoboard.do?method=photoList&cono=<bean:write name="photoForm" property="cono"/>&pbname=', '<bean:write name="photoForm" property="pbname"/>')"><img src="<%=imagePath %>icon_list.jpg"/></a>
					</td>
				</tr>
			</table>
			</html:form>
		</td>
	</tr>
</table>
</div>
<div id="topdeck" style="position: absolute;display: none">&nbsp;</div>

<%@ include file="../common/include/footer.jsp" %>

<script type="text/javascript">
	
	//제목, 작성자 검색 스크립트/////////////////////////////////
	function search(){
		var word = document.getElementById("searchWord").value.replace(/\s/g,"");
		var listForm = document.getElementById("photoForm");
		var search = document.getElementById("selectField").value;
		if(word.length>0){
			if(search=="title"){		
				listForm.submit();
			}else if(search=="id"){
				listForm.submit();
			}			
		} else {
			alert("검색할 단어를 입력하세요 !");
			document.getElementById("searchWord").value="";
		}
	}
	
	//사진에 말풍선 띄우는 스크립트//////////////////////////////
	var nav = (document.layers);
	var iex = (document.all);
	var skn = (nav)? document.topdeck : topdeck.style;
	
	if(nav){
		document.captureEvents(Event.MOUSEMOVE);
	}
	
	document.onmousemove = get_mouse;
	
	function pop(mid, pbtitle, pbcounter){
		var content = "<table cellpadding='3' cellspacing='0' class='photoPop'>" +
						"<tr><td>작성자 : </td><td>" + mid + "</td></tr>" +
						"<tr><td>제&nbsp;&nbsp;&nbsp;&nbsp;목 : </td><td>" + pbtitle + "</td></tr>" +
						"<tr><td>조회수 : </td><td>" + pbcounter + "</td></tr></table>";
		if(nav){
			skn.document.write(content);
			skn.document.close();
			skn.display = "";
		}else if(iex){
			document.all("topdeck").innerHTML = content;
			skn.display = "";
		}
	}
	
	function get_mouse(e){
		var x = (nav)? e.pageX : event.x + document.body.scrollLeft;
		var y = (nav)? e.pageY : event.y + document.body.scrollTop;
		skn.left = x - 0;
		skn.top = y + 20;
	}
	
	function kill(){
		skn.display = "none";
	}
	
</script>
